<template>
    <div>
        <table-title-bar v-on:add="onAdd"
                         ref="bar"
                         loading="loading"></table-title-bar>
        <el-table :data="tableData"
                  highlight-current-row>
            <el-table-column prop="name"
                             label="Account"></el-table-column>
            <el-table-column prop="desc"
                             label="Name"></el-table-column>
            <el-table-column label="Operations"
                             prop="">
                <template scope="scope">
                    <el-button type="text"
                               size="small"
                               @click="onDetail(scope.row.name, scope.row.desc)">Edit</el-button>
                    <el-button type="text"
                               size="small"
                               @click="onDelete(scope.row.name, scope.row.desc)">Delete</el-button>
                </template>
            </el-table-column>
        </el-table>
    
        <!--确认删除账号-->
        <el-dialog :visible.sync="accountDeleteDialogVisible"
                   title="确认删除"
                   size="tiny">
            <el-form :model="accountConfirmDeleteDialogForm">
                <el-form-item label="是否确认删除">
                    <span>{{ accountConfirmDeleteDialogForm.desc }} ?</span>
                </el-form-item>
            </el-form>
            <span slot="footer"
                  class="dialog-footer">
                <el-button @click="accountDeleteDialogVisible = false">取 消</el-button>
                <el-button type="primary"
                           @click="onAccountConfirmDelete">确 定</el-button>
            </span>
        </el-dialog>
    
        <AccountEditDialog v-on:refresh="loadAccounts"
                           ref="accountEditor"></AccountEditDialog>
    </div>
</template>
<script>
    import AccountEditDialog from './accountEdit.vue'
    import tableTitleBar from './tableTitleBar.vue'

    export default {
        components: {
            AccountEditDialog, tableTitleBar
        },
        data () {
            return {
                loading: false,
                tableData: [],
                accountEditDialogVisible: false,
                accountDeleteDialogVisible: false,
                accountEditForm: {
                    name: '',
                    desc: '',
                    isAdd: false
                },
                accountConfirmDeleteDialogForm: {
                    name: '',
                    desc: ''
                }
            }
        },
        methods: {
            onAdd () {
                this.$refs.accountEditor.form.name = ''
                this.$refs.accountEditor.form.desc = ''
                this.$refs.accountEditor.form.isAdd = true
                this.$refs.accountEditor.form.oriAccountName = ''
                this.$refs.accountEditor.dialogVisiable = true
            },
            onAccountConfirmDelete () {
                let name = this.accountConfirmDeleteDialogForm.name || ''
                this.$axios.delete(this.$api.API_USER + '/' + name).then(res => {
                    this.loadAccounts()
                    this.accountDeleteDialogVisible = false
                }).catch(function (err) {
                    console.log(err)
                })
            },
            loadAccounts (func) {
                let log_api = this.$api.API_USERS
                this.$axios.get(log_api).then(res => {
                    this.tableData = res.data
                    if (func) {
                        func()
                    }
                })
            },
            onDetail (name, desc) {
                this.$refs.accountEditor.form.name = name
                this.$refs.accountEditor.form.desc = desc
                this.$refs.accountEditor.form.isAdd = false
                this.$refs.accountEditor.form.oriAccountName = name
                this.$refs.accountEditor.dialogVisiable = true
            },
            onDelete (name, desc) {
                this.accountConfirmDeleteDialogForm.name = name
                this.accountConfirmDeleteDialogForm.desc = desc
                this.accountDeleteDialogVisible = true
            }
        },
        mounted: function () {
            this.$nextTick(() => {
                this.$refs.bar.loading = true
                this.loadAccounts(() => {
                    this.$refs.bar.loading = false
                })
            })
        }
    }
</script>
